<script setup>
const { t } = useI18n()
const appConfig = useAppConfig()
const counter = useCounterStore()
</script>

<template>
  <div class="py-16">
    <UContainer>
      <div class="text-center mb-16">
        <h1 class="text-5xl font-bold mb-6">
          {{ t('welcome') }}
        </h1>
        <p class="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
          <!-- {{ t('home.subtitle') }} -->
          {{ appConfig }}
        </p>
        <!-- <div class="mt-10">
          <UButton size="xl" to="/features">
            {{ t('home.cta') }}
          </UButton>
        </div> -->
      </div>

      <!-- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <UCard v-for="(feature, index) in 3" :key="index">
          <template #header>
            <h3 class="text-xl font-semibold">
              {{ t(`features.item${index + 1}`) }}
            </h3>
          </template>
<p class="text-gray-600 dark:text-gray-300">
  {{ t(`features.description${index + 1}`) }}
</p>
</UCard>
</div> -->
      <div />
    </UContainer>
    <div>
      <p>Count: {{ counter.count }}</p>
      <p>Double: {{ counter.doubleCount }}</p>
      <UButton size="xl" @click="counter.increment()">
        Increment
      </UButton>
    </div>
  </div>
</template>

<style scoped>
</style>
